@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';

.custom-node-flow {
  .vue-flow__node-color-selector {
    border: 1px solid #777;
    padding: 10px;
    border-radius: 10px;
    background: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    .color-selector {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 90%;
      margin: auto;
      gap: 4px;
      button {
        border: 1px solid #777;
        cursor: pointer;
        padding: 5px;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        &:hover {
          -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 10px #00000080;
          transform: scale(105%);
          transition: 0.25s all ease;
        }
      }
    }
  }
}

.animated-bg-gradient {
  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
  background-size: 800% 800%;
  -webkit-animation: gradient 4s ease infinite;
  -moz-animation: gradient 4s ease infinite;
  animation: gradient 4s ease infinite;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 0% 22%;
  }
  50% {
    background-position: 100% 79%;
  }
  to {
    background-position: 0% 22%;
  }
}
@-moz-keyframes gradient {
  0% {
    background-position: 0% 22%;
  }
  50% {
    background-position: 100% 79%;
  }
  to {
    background-position: 0% 22%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 22%;
  }
  50% {
    background-position: 100% 79%;
  }
  to {
    background-position: 0% 22%;
  }
}
